import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.red),
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter app')),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  List<Widget> _initGridViewData() {
    var tmpList = listData.map((value) {
      return Container(
        decoration: BoxDecoration(border: Border.all(color: Colors.black26)),
        child: Column(
          children: <Widget>[
            Expanded(child: Image.asset(value['imageUrl'])),
            SizedBox(height: 10),
            Text(
              value['title'],
              style: const TextStyle(fontSize: 18, color: Colors.black54),
            ),
            Text(
              value['author'],
              style: const TextStyle(fontSize: 16, color: Colors.black87),
            ),
          ],
        ),
      );
    });
    return tmpList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 200, // 最大横轴扩展
      crossAxisSpacing: 10, // 横轴间距
      mainAxisSpacing: 10, // 纵轴间距
      childAspectRatio: 0.5, // 宽高比
      padding: EdgeInsets.all(10), // 内边距
      children: _initGridViewData(),
    );
  }
}

List listData = [
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl":
        "images/OIP-c.jpeg",
  },
  {
    "title": 'Candy Shop2',
    "author": 'Mohamed Chahin',
    "imageUrl":
        "images/OIP-c.jpeg",
  },
  {
    "title": 'Candy Shop3',
    "author": 'Mohamed Chahin',
    "imageUrl":
        "images/OIP-c.jpeg",
  },
  {
    "title": 'Candy Shop4',
    "author": 'Mohamed Chahin',
    "imageUrl":
        "images/OIP-c.jpeg",
  },
];
